import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
	state: {
		todos: []
	},
	mutations: {
		addTodo(state, payload) {
			state.todos = [...state.todos, {
				text: payload,
				completed: false,
				index: state.todos.length
			}]
		},
		deleteTodo(state, payload) {
			state.todos = state.todos.filter(item => item.index != payload);
		},
		toogleTodo(state, payload) {
			state.todos = state.todos.map(item => {
				if(item.index == payload) {
					item.completed = !item.completed
				}
				return item
			})
		}
	},
	
	actions: {
		addTodo({ commit }, payload) {
			commit('addTodo', payload);
		},
		deleteTodo({ commit }, payload) {
			commit('deleteTodo', payload);
		},
		toogleTodo({ commit }, payload) {
			commit('toogleTodo', payload);
		}
	},
	getters: {
		todos: (state) => state.todos
	}
});

export default store;